<template>
	<view id="AssetDetails">

		<view class="conner">
			<view class="conner_top">
				<view class="top_text1">
					<view class="title">账户总额</view>
					<view class="title_text" v-show="flang==true">{{List.unConfirmCapital+List.confirmCapital}}</view>
					<view class="title_text" v-show="flang==false">******</view>
					<view @click="changYanJing" :class="yanjing?'icon_img':'avtive_img'"></view>
				</view>
				<view class="conner_bottom">
					<view class="bottom_lift">
						<view class="lift_text1">昨日收益(元)</view>
						<view class="lift_text2" v-show="flang==true">
							<text v-if="List.todayEarnings">{{List.todayEarnings}}</text>
							<text v-else>0.00</text>
						</view>
						<view class="lift_text2" v-show="flang==false">******</view>
					</view>
					<view class="bottom_rigth">
						<view class="rigth_text1">累计收益(元)</view>
						<view class="rigth_text2" v-show="flang==true">
							<text v-if="List.totalEarnings">{{List.totalEarnings}}</text>
							<text v-else>0.00</text>
						</view>
						<view class="rigth_text2" v-show="flang==false">******</view>
					</view>
				</view>
			</view>

			<view class="jieshao">
				<view class="jieshao_lift">成功购买<text v-show="flang==true">{{List.overAllBalance}}元</text> <text
						v-show="flang==false">******</text></view>
				<view class="jieshao_right">预算{{List.earningsDay}}日计息</view>
			</view>

			<view class="center">
				<view class="center_item">
					<view class="item_lift">
						<view class="lift_text1">固定账户(元)</view>
						<view class="lift_text2">近一年年化投资回报率</view>
					</view>
					<view class="item_rigth">
						<view class="rigth_text1" v-show="flang==true">{{List.yieldYates}}</view>
						<view class="rigth_text1" v-show="flang==false">******</view>
						<view class="rigth_text2" v-show="flang==true">{{List.yieldYates}}%</view>
						<view class="rigth_text2" v-show="flang==false">******</view>
					</view>
				</view>
			</view>

			<view class="boottom">
				<view class="boottom_item">
					<view class="item_lift">收益起始日期</view>
					<view class="item_rigth">{{List.earningsDay}}</view>
				</view>
				<view class="boottom_item" @click="toDetails(List.productId)">
					<view class="item_lift">产品详情及规则</view>
					<view class="item_rigth">
						<image src="https://z3.ax1x.com/2021/04/08/cYtESU.png"></image>
					</view>

				</view>
			</view>


		</view>
		<!-- 支付密码键盘插件 -->
		<view class="jianpan">
			<passkeyborad :money=theYuan :show="showKeyBoard" @success="enterSuccess" @close="close">
			</passkeyborad>
		</view>

		<!-- 定位按钮 -->
		<view class="DW_text">今日收益将于24点左右更新</view>
		<view class="dingwei" @click="maichu">转出</view>
	</view>
</template>

<script>
	import passkeyborad from "@/components/yzc-paykeyboard/yzc-paykeyboard.vue";
	import {
		createNamespacedHelpers
	} from "vuex";
	const {
		mapState
	} = createNamespacedHelpers("UserInfor");
	const {
		mapActions: mapActions2
	} = createNamespacedHelpers("details");
	export default {
		components: {
			passkeyborad
		},
		data() {
			return {
				yanjing: true, //控制眼睛
				flang: true, //控制星号与显示
				List: [],
				//金额
				theYuan: "",
				showKeyBoard: false, //支付密码框状态

			}
		},
		onShow() {

		},
		computed: {
			...mapState(['userData'])
		},

		onLoad: function(option) {
			// console.log(JSON.parse(option.index)); 
			let arr = JSON.parse(option.index)
			this.List = arr[0];
			// console.log(this.List)
			this.theYuan = this.List.unConfirmCapital + this.List.confirmCapital
		},
		methods: {
			...mapActions2(["getRollt","getFundMoney"]),
			// 跳转对应详情
			toDetails(id) {
				uni.navigateTo({

					url: `/pages/reguarDetail/reguarDetail?id=${id}`
				})
			},
			// 改变眼睛状态
			changYanJing() {
				this.yanjing = !this.yanjing;
				this.flang = !this.flang;
			},
			// 打开密码输入框
			openModal() {
				this.showKeyBoard = true
			},
			// 点击[取消] 关闭输入框 的回调
			close() {
				this.showKeyBoard = false;
			},

			// 卖出按钮
			 maichu() {
				this.showKeyBoard = true;
			},
			// 密码输入的回调
			async enterSuccess(password) {
				this.userData.userPass = password;
				let buyDatas = {
					"memberName": this.userData.username, //用户账户
					"pid": this.List.pid, //账单记录id
					"productId": this.List.productId, //产品id
					"productName": this.List.productName, //产品名字
					"payPassword": this.userData.userPass, //支付密码
					"payType": "余额"
				};
				const data = await this.getRollt(buyDatas);
				// console.log(111, data);
				if (data.code == 200) {
					uni.showModal({
						title: '提示',
						content: '赎回成功，资金将在1-3个工昨日到账到余额',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: "/pages/personal/my-assets/TermAssets/TermAssets"
								})
							} else if (res.cancel) {
								uni.navigateTo({
									url: "/pages/personal/my-assets/TermAssets/TermAssets"
								})
							}
						}
					});
                   // 键盘弹窗关闭
                   this.showKeyBoard = false
				} else if (data.code == 607) {
					uni.showToast({
						title: "支付密码错误",
						duration: 1000,
						icon: "none"
					});
					this.showKeyBoard = true; //键盘弹出
				}
				// 键盘弹窗关闭
				this.showKeyBoard = false
			},
		}
	}
</script>

<style lang="scss">
	.dingwei {
		position: fixed;
		bottom: 0;
		width: 100vw;
		height: 85rpx;
		line-height: 85rpx;
		background-color: #3476F1;
		color: #fff;
		font-size: 30rpx;
		text-align: center;
	}

	.DW_text {
		width: 100vw;
		text-align: center;
		padding: 6rpx 0;
		background-color: #DFE6F3;
		font-size: 24rpx;
		color: #4399FC;
		position: fixed;
		bottom: 85rpx;
	}

	.conner {
		height: 100vh;
		background-color: #f3f3f3;
		// padding-top: 160rpx;

		.conner_top {
			background-color: #fff;
			height: 325rpx;
			padding: 30rpx;
			border-radius: 0 0 30rpx 30rpx;

			.top_text1 {
				text-align: center;
				position: relative;

				.title {
					font-size: 26rpx;
					color: #999;
					margin-right: 60rpx;
				}

				.title_text {
					font-size: 52rpx;
					font-weight: 600;
					color: red;
					margin-top: 20rpx;
				}

				.icon_img {
					position: absolute;
					right: 246rpx;
					top: 3rpx;
					width: 60rpx;
					height: 30rpx;
					background-image: url("https://z3.ax1x.com/2021/04/12/cDT6tf.png");
					background-size: 60rpx;
					background-repeat: no-repeat;
					opacity: .6;
				}

				.avtive_img {
					position: absolute;
					right: 246rpx;
					top: 3rpx;
					width: 60rpx;
					height: 30rpx;
					background-image: url("https://z3.ax1x.com/2021/04/12/cD79N6.png");
					background-size: 45rpx;
					background-repeat: no-repeat;
					opacity: .6;
				}
			}

			.conner_bottom {
				display: flex;
				margin-top: 40rpx;
				padding: 0 40rpx;

				.bottom_lift {
					width: 50%;
					text-align: left;

					.lift_text1 {
						font-size: 26rpx;
						color: #999;
					}

					.lift_text2 {
						font-size: 40rpx;
						color: #333;
						margin-top: 10rpx;
					}
				}

				.bottom_rigth {
					width: 50%;
					text-align: right;

					.rigth_text1 {
						font-size: 26rpx;
						color: #999;
					}

					.rigth_text2 {
						font-size: 40rpx;
						color: #333;
						font-weight: 600;
						margin-top: 10rpx;

					}
				}
			}
		}

		.jieshao {
			padding: 20rpx 70rpx;
			margin: 20rpx 0;
			background-color: #fff;
			display: flex;

			.jieshao_lift {
				width: 50%;
				text-align: left;
				font-size: 26rpx;
				color: #333;
			}

			.jieshao_right {
				width: 50%;
				text-align: right;
				font-size: 26rpx;
				color: #999;
			}
		}

		.center {
			padding: 0rpx 70rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.center_item {
				padding: 30rpx 0;
				display: flex;

				&:nth-child(1) {
					border-bottom: 1px solid #f3f3f3;
				}

				.item_lift {
					width: 50%;
					text-align: left;

					.lift_text1 {
						font-size: 28rpx;
						color: #333;
					}

					.lift_text2 {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}

				.item_rigth {
					width: 50%;
					text-align: right;

					.rigth_text1 {
						font-size: 28rpx;
						color: red;
					}

					.rigth_text2 {
						font-size: 24rpx;
						color: #999;
						margin-top: 10rpx;
					}
				}
			}
		}


		.boottom {
			padding: 0rpx 70rpx;
			margin-top: 20rpx;
			background-color: #fff;

			.boottom_item {
				padding: 30rpx 0;
				display: flex;

				&:nth-child(1) {
					border-bottom: 1px solid #f3f3f3;
				}

				.item_lift {
					width: 50%;
					text-align: left;
					font-size: 28rpx;
					color: #333;
				}

				.item_rigth {
					width: 50%;
					text-align: right;
					font-size: 28rpx;
					color: #999;
				}

				image {

					width: 20rpx;
					height: 26rpx;
					text-align: right;
				}
			}
		}
	}
</style>
